<template>
<div id="chartsPage">
  <div class="title">
    中奖排行榜
  </div>
  <div class="charts-wrap">
    <div class="roll-wrap" id="roll-wrap">
		  <ul class="charts-con" id='charts-con'>
		    <li v-for="item in 20" class="flex" style="height: 30px; line-height: 30px;padding: 0 16px">
		      <span class="item1">{{item}}</span>
		      <span class="item2" @click="open(item)" style="cursor: pointer">te***</span>
		      <span class="item3">1000.00</span>
		    </li>
		  </ul>
    </div>
  </div>
</div>
</template>

<script>
	import jQuery from 'jquery'
	import execution from '../../../assets/js/autoScroll.js'
  export default {
    data () {
      return {
      }
    },
    mounted () {
    	var n = this.$jQuery('#chartsPage')
    	console.log(n)
    	const playauto = {
    		outer: '.charts-wrap',//最外层目标类名
	      box: '.roll-wrap',//内容区的父级，也就是视框的类名
	      img: '#charts-con',//小模块元素的父级，也就是内容区的类名
	      tag: 'li',//基础目标单位，小模块元素
	      speed: 2,//设置移动一个单位的速度
	      lbtype: 'up',//设置是垂直的滚动，还是水平的滚动，有“up”和“left”两个选择
	      row: 1,	//容器存放数量，防止数量不够时轮播
	      or: true //是否自动播放，布尔值控制
    	}
    	execution(playauto)
    //  this.playauto() // 来一个钩子函数 执行这个函数
    },
    methods: {
      open (mes) {
        this.$alert(mes, '中奖信息', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }
    }
  }
</script>

<style lang="less">
	#chartsPage {
	  margin-top: 10px;
	  .title{
	    height: 40px;
	    background-color: #f8f8f8;
	    color: #e43972;
	    font-size: 18px;
	    border:1px solid #ccc;
	    line-height:40px;
	  }
	  .roll-wrap {
	  	overflow: hidden;
	  	height:300px;
	  	border: 1px solid #ccc;
	  }
	  .charts-con {
	    .item1{
	      width: 19px;
	      height:19px;
	      background-color: #e4393c;
	      color: #fff;
	      line-height: 19px;
	      margin: 5px 10px 0 0;
	      border-radius: 5px;
	    }
	    .item2 {
	      flex: 1;
	      text-align: left;
	    }
	    .item3 {
	      width: 50%;
	      padding: 0 15px;
	      color: #e43972;
	      text-align: left;
	    }
	  }
	}
</style>
